<template>
    <view-box class="ZymlList" bodyPaddingTop="0" bodyPaddingBottom="0">
        <x-header> {{selectText}}
            <a slot="right" @click="showMenu">
                <span class="righttext">
                    选择
                </span>
                <div class="triangle_border_down"></div>
            </a>
        </x-header>
        <search v-model="searchValue" @on-focus="onFocus" @on-change="onChange" @on-cancel="onCancel" @on-submit="onSubmit" ref="search">
            <!--一直报错?页面name不能为search-->
        </search>

        <group v-for="item in test_ml_list" :key="item.letter" :title="item.letter">
            <cell v-for="data in filterLsit(item.data) " :title="data.name | sub" :key="data.id" is-link  @click.native="go('ZymlListxq',{id:data.id,name:data.name})">
                <div>
                    <span style="color: green">[{{data.mountCount}}/{{data.catalogCount}}]</span>
                </div>
            </cell>
        </group>
        <!--放两个空的，不然最后一条会被tabbar遮挡-->
         <div class="space"></div>
        <tabbar style="position:fixed">
            <tabbar-item>
                <x-icon class="icons" slot="icon" type="ios-search" size="25"></x-icon>
                <span slot="label" class="iconstext">业务查询</span>
            </tabbar-item>
            <tabbar-item link="/FwsqList">
                <x-icon slot="icon" type="ios-ionic-outline" size="25"></x-icon>
                <span slot="label">微服务</span>
            </tabbar-item>
            <tabbar-item link="/whome">
                <x-icon slot="icon" type="ios-help-outline" size="25"></x-icon>
                <span slot="label">互动交流</span>
            </tabbar-item>
            <tabbar-item link="/whome">
                <x-icon slot="icon" type="ios-help-outline" size="25"></x-icon>
                <span slot="label">政务云介绍</span>
            </tabbar-item>
        </tabbar>
        <div v-transfer-dom>
            <actionsheet :menus="mlroot_list" v-model="showMenus" show-cancel @on-click-menu="menuClisk"></actionsheet>
        </div>
    </view-box>
</template>
  <script>
import {
    ViewBox,
    Flexbox,
    FlexboxItem,
    XHeader,
    Search,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Tabbar,
    TabbarItem,
    TransferDom,
    Actionsheet,Sticky
} from "vux";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
    name: "ZymlList",
    components: {
        ViewBox,
        Flexbox,
        FlexboxItem,
        XHeader,
        Search,
        Cell,
        CellBox,
        CellFormPreview,
        Group,
        Tabbar,
        TabbarItem,
        Actionsheet,
        Sticky
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            searchValue: "",
            selectText: "部门信息资源目录",
            showMenus: false,
            test_ml_list  : [{'data': [{"isParent":false,"code":"","DISCRIPTION":"","name":"市发改委 [22/22]","mountCount":22,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"fff044fc8bd74720a919394cc523e057","VALUE":"30702040013001","catalogCount":22,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市教育局 [2/2]","mountCount":2,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"54f0520e2b5a4e6f9985e05b46782b7c","VALUE":"30702040013003","catalogCount":2,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市科技局 [12/12]","mountCount":12,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"290bcf83ce1742a7815bcc0d1e93f6a4","VALUE":"30702040013004","catalogCount":12,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市民宗委 [4/4]","mountCount":4,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"099900e3547a4ec7b6b5b73570eb1bdb","VALUE":"30702040013005","catalogCount":4,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市公安局 [67/67]","mountCount":67,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"7b013c26dee74984b7d2d51c0ed81750","VALUE":"30702040013006","catalogCount":67,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市监察委 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"8dab5109fb9640dba0cbcb08bb59cd39","VALUE":"30702040013007","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市民政局 [17/17]","mountCount":17,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"18e5e181b48145c2a719c7801667e4f0","VALUE":"30702040013008","catalogCount":17,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市财政局 [2/2]","mountCount":2,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"39f9f0e44ccb4a2b8d5fc27395822e6a","VALUE":"30702040013010","catalogCount":2,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市人社局 [90/90]","mountCount":90,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"0e098b126a104f60a8d7c8d6512d9b73","VALUE":"30702040013011","catalogCount":90,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市国土规划局 [8/8]","mountCount":8,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"db34b65720474944b065ad35ed02ccbf","VALUE":"30702040013012","catalogCount":8,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市环保局 [28/28]","mountCount":28,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"6db84c645e2943f7bd7ed8b66da788e9","VALUE":"30702040013013","catalogCount":28,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市城建委 [55/55]","mountCount":55,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"db196cf6f5484e429d145b7712096288","VALUE":"30702040013014","catalogCount":55,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市城管委 [20/20]","mountCount":20,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"8661f9a9b8034080920d56456e598cd0","VALUE":"30702040013015","catalogCount":20,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市交运委 [15/15]","mountCount":15,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"e271f378a773432abfa0dc3a814de502","VALUE":"30702040013016","catalogCount":15,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市水务局 [130/130]","mountCount":130,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"839bb7f38bb747a8a49ccbb7cb155d35","VALUE":"30702040013017","catalogCount":130,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市农委 [62/62]","mountCount":62,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"e60a1bbf8d774ab58daee85e093dd6e6","VALUE":"30702040013018","catalogCount":62,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市商务局 [10/10]","mountCount":10,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"1f813e1e2a18438aa63838dc3a214a56","VALUE":"30702040013019","catalogCount":10,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市文化局 [29/29]","mountCount":29,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"03e90cf62fcd47d4aee56078a6b97fd3","VALUE":"30702040013020","catalogCount":29,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市卫计委 [109/109]","mountCount":109,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"13078175bc6643debca7b6f2e4b16259","VALUE":"30702040013021","catalogCount":109,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市审计局 [2/2]","mountCount":2,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"0fb50c16e6b24f90897238d0982d7ba3","VALUE":"30702040013022","catalogCount":2,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市外办 [1/1]","mountCount":1,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"41dc318e3a68413a9d81ea553ed06c86","VALUE":"30702040013023","catalogCount":1,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市食药监局 [26/26]","mountCount":26,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"802e06ee3fd9413d990e5f3a56a2c1a5","VALUE":"30702040013024","catalogCount":26,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市国资委 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"54ea3fcc22d5433ba5c18ece8e2c22ed","VALUE":"30702040013025","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市房管局 [43/43]","mountCount":43,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"c0871a727b024999824b20d710a5956b","VALUE":"30702040013026","catalogCount":43,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市工商局 [102/102]","mountCount":102,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"417d2aa3f7d5425c85b9232b44129aa6","VALUE":"30702040013027","catalogCount":102,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市质监局 [9/9]","mountCount":9,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"2cf74d1fab7f4921a76b4fae4b0ad862","VALUE":"30702040013028","catalogCount":9,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市安监局 [18/18]","mountCount":18,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"12c02304312d45249515d32f918fac96","VALUE":"30702040013029","catalogCount":18,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市旅游委 [21/21]","mountCount":21,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"7b22dd66c7324c0da635a4ebde335ddb","VALUE":"30702040013030","catalogCount":21,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市体育局 [5/5]","mountCount":5,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"6da35e6018c24b4bb956d4eef053309d","VALUE":"30702040013031","catalogCount":5,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市统计局 [114/114]","mountCount":114,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"1089a5993fd949f8be637d3dc648640b","VALUE":"30702040013032","catalogCount":114,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市园林局 [23/23]","mountCount":23,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"567f3a23fc8f4c5c9dd76f19cc8098ad","VALUE":"30702040013033","catalogCount":23,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市民防办 [12/12]","mountCount":12,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"d3c138341bc14cd8a2cebd785cde46a8","VALUE":"30702040013034","catalogCount":12,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市法制办 [5/5]","mountCount":5,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"0e6f85b77482464393296c109be06fe9","VALUE":"30702040013035","catalogCount":5,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市金融工作局 [4/4]","mountCount":4,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"42f985dcc4de4ddc8b56233bcb0f52e1","VALUE":"30702040013036","catalogCount":4,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市档案局 [3/3]","mountCount":3,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"c24f7cd5be614da4b4ea14e71401193e","VALUE":"30702040013037","catalogCount":3,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市政务办 [99/99]","mountCount":99,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"85dca54a53b9425bb75edb8ed19d865b","VALUE":"30702040013038","catalogCount":99,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市检察院 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"99da1dc9906a4bfab10ce1fb9fa332f3","VALUE":"30702040013039","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市中级人民法院 [7/7]","mountCount":7,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"a0ea4c7e25364ed7a48a1ae4e57c0360","VALUE":"30702040013040","catalogCount":7,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市汉口银行 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"462a9396117b42e8a64cc6a0117dfa38","VALUE":"30702040013043","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市残联 [5/5]","mountCount":5,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"f2444069680f4f8bb3b93a1de223c3c5","VALUE":"30702040013044","catalogCount":5,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市烟草局 [1/1]","mountCount":1,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"5e6755b8517f4f18a2a4bbb20666c93b","VALUE":"30702040013045","catalogCount":1,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市供销社 [4/4]","mountCount":4,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"9e7db7c0395949a58bf135597d55df31","VALUE":"30702040013046","catalogCount":4,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市综治办 [1/1]","mountCount":1,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"7453b8c596bc46feb931ae6f4147d31a","VALUE":"30702040013047","catalogCount":1,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市税务局 [29/29]","mountCount":29,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"3b95ff43d54c43d69f6818e87f31370e","VALUE":"30702040013048","catalogCount":29,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市妇联 [1/1]","mountCount":1,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"e3a3714ef6424a1bb7bb0c521c9eadcc","VALUE":"30702040013049","catalogCount":1,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市信访局 [13/13]","mountCount":13,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"6350c9af17414c2c86d570badfd87373","VALUE":"30702040013050","catalogCount":13,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市住房公积金管理中心 [10/10]","mountCount":10,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"4c5a8299866949e3b846f5b9039268d1","VALUE":"30702040013051","catalogCount":10,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"团市委 [3/3]","mountCount":3,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"b9f3305f9b224cfa98ac93f6a28e344d","VALUE":"30702040013052","catalogCount":3,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市气象局 [10/10]","mountCount":10,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"98905e6d1b4543f89ba2a25448c1a237","VALUE":"30702040013053","catalogCount":10,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市编办 [2/2]","mountCount":2,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"02d45d3895d7421891b9de3cbe66bbb3","VALUE":"30702040013054","catalogCount":2,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"中国人民银行武汉分行营业管理部 [1/1]","mountCount":1,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"37e5b077f8ce4dc3a2659e4d6ed65a1e","VALUE":"30702040013055","catalogCount":1,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市信用办 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"3d04be6bc82046e289b0dd42138907b7","VALUE":"30702040013056","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市经信委 [137/137]","mountCount":137,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"391964be099b4cb3af2a5b7dbf6d6969","VALUE":"30702040013002","catalogCount":137,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市网信办 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"da68d73534e241beb213362d59b50967","VALUE":"30702040013057","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市红十字会 [6/6]","mountCount":6,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"ed69e26aeb974bafad76b5bb879339ea","VALUE":"30702040013058","catalogCount":6,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市地方志 [0/0]","mountCount":0,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"d1da11621c324a02b09e23e8171483f5","VALUE":"30702040013059","catalogCount":0,"TYPE":2},{"isParent":false,"code":"","DISCRIPTION":"","name":"市司法局 [23/23]","mountCount":23,"pId":"29001fffc4854893b4b3035f930624ff","IS_CATALOGUE":"1","id":"f2b5f018a0e94bcb95b1c87bb44bc830","VALUE":"30702040013009","catalogCount":23,"TYPE":2}]}]
        };
    },
    computed: {
        ...mapGetters([
            "mlroot_list",
            "ml_list"
        ])
    },
    created() {
/*        this.$store.dispatch("getCatalogRootTree");
        this.$store.dispatch(
            "getCatalogList",
            "29001fffc4854893b4b3035f930624ff"
        );*/
    },
    mounted() {},
    filters: {
        sub(val) {
            let param = val.substring(0, val.indexOf("["));
            return param;
        }
    },
    methods: {
        onFocus() {},
        onCancel() {},
        filterLsit: function(m_list) {
            let val=this.searchValue;
            return m_list.filter(function(data) {
                return data.name.indexOf(val)>=0;
            });
        },
        onSubmit(keytext) {
            this.$refs.search.setBlur();
            this.$vux.toast.show({
                type: "text",
                position: "top",
                text: keytext
            });
            this.results = [1, 2, 3];
        },
        onChange(keytext) {
            this.results = [11, 22, 33];
        },
        showMenu() {
            this.showMenus = true;
        },
        menuClisk(menuKey, menuItem) {
            this.selectText = menuItem;
            //console.log(menuKey);
            this.$store.dispatch("getCatalogList", menuKey);
            //this.results = [11, 22, 33, 44, 55];
        }
    }
};
</script>
<style lang="less">
.ZymlList {
    html,
    body {
        height: 100%;
    }
    .icons {
        fill: #f70968;
    }
    .iconstext {
        color: #f70968;
    }
    .righttext {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }
    .triangle_border_down {
        width: 0;
        height: 0;
        float: right;
        border-width: 8px 8px 0;
        border-style: solid;
        border-color: #fff transparent transparent; /*灰 透明 透明 */
        margin: 8px auto;
        margin-left: 3px;
        position: relative;
    }
    .space {
    padding: 30px 0;
    margin: 10px;
    text-align: center;
    //border: 1px green solid;
  }
}
</style>